<!-- 律师详细信息页面 -->
<template>
	<view class="user-data-container-box">
		<!-- 头像区域 -->
		<view class="top-bg-box"><u-avatar class="avatar" :src="lawyerData.avatar" size="154"></u-avatar></view>
		<!-- 当律师还没有入驻时显示的信息 -->
		<view class="data-null-box" v-if="!lawyerData.lawyer_id">
			<view class="my-journal-null-box">
				<view class="logo-box">
					<u-image width="221rpx" height="312rpx" :src="vuex_url + '/static/fun-icon/my_journal.png'"></u-image>
					<text class="logo-text">暂无入驻信息</text>
				</view>
			</view>
		</view>
		<!-- 律师已入驻后显示的律师信息 -->
		<view class="lawyer-data-detail-box" v-else>
			<view class="name-box">{{lawyerData.nick_name}}</view>
			<view class="datas-box">
				<text>{{lawyerData.province}}</text>
				<text class="sep">|</text>
				<text>{{lawyerData.work_year}}</text>
				<text class="sep">|</text>
				<text>{{lawyerData.education}}</text>
			</view>
			<view class="datas-box">执业证书：{{ lawyerData.zyz_no || '暂未上传' }}</view>
			<!-- 律师擅长案例 -->
			<view class="goods-box">
				<view class="item-box" v-for="(item, index) in lawyerData.good_at" :key="index">{{ item }}</view>
			</view>
			<!-- 咨询人数、评分、时长区域 -->
			<view class="user-number-box">
				<view class="item">
					<view style="color: #FA7D00;">
						<text class="number">{{ lawyerData.service_num || 0 }}</text>
						人
					</view>
					<text>咨询人数</text>
				</view>
				<view class="item">
					<view style="color: #FA7D00;">
						<text class="number">{{ lawyerData.star || 0 }}</text>
					</view>
					<text>用户评分</text>
				</view>
				<view class="item">
					<view style="color: #FA7D00;">
						<text class="number">{{ lawyerData.rep_time || 0 }}</text>
						分钟
					</view>
					<text>咨询响应时长</text>
				</view>
			</view>
			<!-- 服务类型 -->
			<view class="ser-type-box">
				<view class="title">服务类型</view>
				<!-- 循环渲染服务项 -->
				<view class="type-items">
					<view class="type-item-box" v-for="typeItem in ser_type" :key="typeItem.id">
						<view>{{ typeItem.title }}</view>
						<view class="tip-text">{{ typeItem.money }}元/小时</view>
						<view class="nowser-btn-box" @click="nowNewsClick(typeItem.id)">立即咨询</view>
					</view>
				</view>
			</view>
			<!-- 平台保障 -->
			<view class="protect-box">
				<view class="protect">
					平台保障
					<u-icon class="u-m-l-12" name="arrow-right" size="25" color="#D9AB3E"></u-icon>
				</view>
				<view class="items-box">
					<view class="pro-item">
						<view class="icon-box"><u-icon name="checkmark" size="18"></u-icon></view>
						<text>严选真实职业律师</text>
					</view>
					<view class="pro-item">
						<view class="icon-box"><u-icon name="checkmark" size="18"></u-icon></view>
						<text>一对一咨询保障隐私</text>
					</view>
					<view class="pro-item">
						<view class="icon-box"><u-icon name="checkmark" size="18"></u-icon></view>
						<text>服务不好全额退款</text>
					</view>
				</view>
			</view>
			<!-- 简介 -->
			<view class="ser-type-box">
				<view class="title">律师简介</view>
				<view class="brief-content"><u-parse :html="lawyerData.comment" :selectable="true"></u-parse></view>
				<view class="brief-items-box">
					<view class="pro-item" v-for="authItem in lawyer_auths" :key="authItem.id">
						<view class="icon-box"><u-icon name="checkmark" size="18" color="#36C67D"></u-icon></view>
						<text>{{ authItem.text }}</text>
					</view>
				</view>
			</view>
			<!-- 用户评价 -->
			<view class="evaluate-container-box">
				<view class="title">用户评价</view>
				<view class="eva-item" v-for="evaItem in addEvaluateList" :key="evaItem.id">
					<evaluate-item :evaluationItem="evaItem"></evaluate-item>
				</view>
				<u-divider half-width="50%" v-if="showDivider">我是有底线的</u-divider>
				
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			lawyerData: {},		// 律师信息对象
			ser_type: [			// 服务类型
				{
					id: 1,
					title: '电话咨询',
					money: '',	// 元/小时
				},
				{
					id: 2,
					title: '图文咨询',
					money: '',	// 元/小时
				}
			],
			// 职业认证列表数据
			lawyer_auths: [
				{
					id: 1,
					isAuth: true, // 该项认证是否完成
					text: '职业认证'
				},
				{
					id: 2,
					isAuth: true,
					text: '手机认证'
				},
				{
					id: 3,
					isAuth: true,
					text: '实名认证'
				},
				{
					id: 4,
					isAuth: true,
					text: '职务认证'
				}
			],
			// 模拟的添加用户评价的数据
			addEvaluateList: [],
			// 获取评论时的筛选条件
			sortData: {
				page: 1,
				page_size: 10,
			},
			// 当用户评价数据加载完毕没有更多了时将 showDivider 设置为 true 则可以显示 “没有更多数据” 的底线提示
			showDivider: false,
		};
	},
	onLoad() {
		// 设置导航栏样式
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#00C9B1'
		});
		
		this.getData()
		this.sortData.page = 1
		this.addEvaluateList = []
		this.getLawyerComment()
	},
	// 监听下拉刷新事件
	async onPullDownRefresh() {
		this.sortData.page = 1
		this.addEvaluateList = []
		await this.getData()
		await this.getLawyerComment()
		uni.stopPullDownRefresh()	// 关闭下拉刷新窗口动画
		this.$u.toast('页面数据已刷新')
	},
	// 监听上拉触底事件
	onReachBottom() {
		this.sortData.page += 1
		this.getLawyerComment()
	},
	methods: {
		// 获取律师信息
		async getData() {
			const res = await this.$u.api.getLawyerInfo()
			if(!res) return
			this.lawyerData = res
			this.ser_type[0].money = res.phone_charge
			this.ser_type[1].money = res.talk_charge
		},
		// 获取评论数据
		async getLawyerComment() {
			const res = await this.$u.api.getMyCommentList(this.sortData)
			if(!res) return
			if(res.length < 1) {
				this.sortData.page = this.sortData.page < 2 ? 1 : (this.sortData.page - 1)
				this.showDivider = true
				return
			}
			this.addEvaluateList = [...this.addEvaluateList, ...res]
			// console.log(this.addEvaluateList);
		},
		// 服务类型 项 的点击事件
		async nowNewsClick(type_id) {
			// 注:传递的 type_id 如果为 1 表示为 电话咨询 类型，为 2 表示为 图文咨询 类型
			if(type_id === 1) {
				const res = await this.$u.api.isCallLawyer({lawyer_id: this.lawyer_id})
				console.log(res);
				if(res.type === 1) {
					const phone = await this.$u.utils.decode(res.mobile)
					// 电话咨询则直接拨打电话
					uni.makePhoneCall({
					    phoneNumber: phone + '',
					});
				} else if(res.type === 2) {		// 没有支付或支付记录过期
					this.$u.vuex('vuex_chatlawyer_id', this.lawyer_id)
					this.$u.route('/myPackageA/pages/views/weixin-pay?type=1')
				}
				
				
			} else {	// 点击了 图文咨询
				// 携参跳转到在线聊天页面
				this.$u.route('/myPackageA/pages/views/chatting?lawyer_id=' + this.lawyer_id)	// 当前页面的律师 id 作为参数
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.user-data-container-box {
	width: 750rpx;
	min-height: 100vh;
	.top-bg-box {
		width: 100%;
		height: 140rpx;
		background-color: #00c9b1;
		position: relative;
		.avatar {
			position: absolute;
			top: 44rpx;
			right: 50rpx;
		}
	}
	.data-null-box {
		width: 750rpx;
	}
}
.my-journal-null-box {
	width: 750rpx;
	height: 100%;

	.logo-box {
		height: 500rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
		.logo-text {
			margin-top: 50rpx;
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			line-height: 42rpx;
		}
	}
}
.lawyer-data-detail-box {
	width: 750rpx;
	min-height: 100vh;
	padding: 26rpx 26rpx;
	.name-box {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #141418;
	}
	.datas-box {
		display: flex;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #5f5f6b;
		margin: 10rpx 0;
		.sep {
			margin: 0 16rpx;
		}
	}
}
.goods-box {
	width: 100%;
	display: flex;
	margin: 10rpx 0;
	.item-box {
		background-color: #e5f9f7;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #00c9b1;
		padding: 5rpx 10rpx;
		margin-right: 15rpx;
	}
}
.user-number-box {
	margin: 50rpx 0;
	width: 100%;
	height: 80rpx;
	display: flex;
	justify-content: space-around;
	.item {
		width: 33.3%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #5f5f6b;
		.number {
			font-size: 36rpx;
			font-family: PingFang-SC-Medium;
		}
	}
}
.title {
	margin: 25rpx 0;
	font-size: 34rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #141418;
}
.ser-type-box {
	display: flex;
	flex-direction: column;

	.type-items {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.type-item-box {
			margin: 25rpx 0;
			width: 337rpx;
			height: 129rpx;
			border-radius: 23rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			padding: 29rpx;
			position: relative;
			&:nth-child(1) {
				background-color: #def0fe;
				color: #3896df;
				.nowser-btn-box {
					background-color: #3896df;
				}
			}
			&:nth-child(2) {
				background-color: #dffbed;
				color: #2ad680;
				.nowser-btn-box {
					background-color: #2ad680;
				}
			}
			.tip-text {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #141418;
			}
			.nowser-btn-box {
				width: 84rpx;
				height: 84rpx;
				line-height: 42rpx;
				text-align: center;
				position: absolute;
				top: 50%;
				right: 35rpx;
				transform: translateY(-50%);
				// background: #66bcff;
				border-radius: 10rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}
		}
	}
}
.protect-box {
	margin: 25rpx 0;
	width: 100%;
	height: 97rpx;
	background-color: #f4f4f6;
	font-size: 20rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #d9ab3e;
	padding: 15rpx 25rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	.protect {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #d9ab3e;
	}
	.items-box {
		width: 100%;
		display: flex;
		.pro-item {
			width: 33.3%;
			display: flex;
			align-items: center;
			&:nth-child(3) {
				justify-content: flex-end;
			}
			.icon-box {
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				// background-color: #F4F4F6;
				background-color: white;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 5rpx;
			}
		}
	}
}
.ser-type-box {
	margin: 25rpx 0;
	.brief-content {
		display: block;
		color: #5f5f6b;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		text-indent: 2em;
	}
	.brief-items-box {
		margin: 25rpx 0;
		display: flex;
		.pro-item {
			width: 25%;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #5f5f6b;
			.icon-box {
				width: 24rpx;
				height: 24rpx;
				border-radius: 50%;
				border: 2rpx solid #36c67d;
				background-color: white;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 13rpx;
			}
		}
	}
}
.evaluate-container-box {
	margin-top: 50rpx;
	padding: 50rpx 0 10rpx;
	// position: relative;
	&::before {
		content: ' ';
		display: block;
		width: 750rpx;
		height: 20rpx;
		background-color: #f5f5f5;
		position: absolute;
		top: -20rpx;
		left: -26rpx;
	}
	.eva-item {
		width: 100%;
		// position: absolute;
		// top: 152rpx;
		// left: -26rpx;
		padding-bottom: 20rpx;
	}
	
}
</style>
